<template>
    <div>
		<div>
			<!-- 头部 -->
			<div class="questiontypetop questiontype">
				<div class="typeleft" v-if="dataevery.type==1||dataevery.type=='1'">【A1题型】</div>
				<div class="typeleft" v-if="dataevery.type==2||dataevery.type=='2'">【A2题型】</div>
				<div class="typeleft" v-if="dataevery.type==3||dataevery.type=='3'">【A3/4题型】</div>
				<div class="typeleft" v-if="dataevery.type==4||dataevery.type=='4'">【B1题型】</div>
				<div class="typeleft" v-if="dataevery.type==5||dataevery.type=='5'">【B2题型】</div>
				<div class="typeright">{{sort}}/50</div>
			</div>
			<div class="page-tab-container">
				<mt-tab-container class="page-tabbar-tab-container" v-model="sort" swipeable>
					<mt-tab-container-item :id="sort">
			            <!-- A1,A2题型 -->
						<div class="list questiontype" v-if="dataevery.type==1||dataevery.type=='1'||dataevery.type==2||dataevery.type=='2'">
						    <h1 class="title">{{sort}}.{{dataevery.question}}</h1>
						    <ul class="main-list">
							    <li v-for='(item,index) in dataevery.choices'>
							        <div>
							    	  <span class="zimu">{{choose[index]}}</span>
							    	</div>
							    	<p>{{item}}</p>
							    </li>
								<!-- <li>
								    <div>
									  <img src="../../../assets/image/wrong.png" alt="">
									</div>
									<p>细胞外液理化因素保持不变</p>
								</li> -->
						    </ul>
						</div>
						 <!-- A3,A4题型 -->
						<div class="list" v-if="dataevery.type==3||dataevery.type=='3'">
							<div class="liststem" v-html="dataevery.stem_id"></div>
						    <h1 class="title questiontype">{{sort}}.{{dataevery.question}}</h1>
						    <ul class="main-list questiontype">
							    <li v-for='(item,index) in dataevery.choices'>
								    <div>
									  <span class="zimu chooseactive">{{choose[index]}}</span>
									</div>
									<p>{{item}}</p>
								</li>
								<!-- <li>
								    <div>
									  <img src="../../../assets/image/wrong.png" alt="">
									</div>
									<p>细胞外液理化因素保持不变</p>
								</li> -->
						    </ul>
						</div>
						<!-- B1 -->
						<div class="list" v-if="dataevery.type==4||dataevery.type=='4'">
							<div class="liststem1">
								<ul class="main-list questiontype">
								    <li>
									    <div>
										  <span class="zimu chooseactive">A</span>
										</div>
										<p>细胞外液理化因素保持不变</p>
									</li>
									<li>
									    <div>
										  <img src="../../../assets/image/wrong.png" alt="">
										</div>
										<p>细胞外液理化因素保持不变</p>
									</li>
								</ul>
							</div>
						    <h1 class="title questiontype">20.机体内环境稳态是指</h1>
						    <div class="choose questiontype">
								<p class="chooseevery">A</p>
								<p class="chooseevery">B</p>
								<p class="chooseevery">C</p>
							</div>
						</div>
					</mt-tab-container-item>
				</mt-tab-container>
			</div>
			<!-- 底部 -->
			<div class="typebottom">
				<div class="questiontypebottom">
					<div class="bottom-left bottom-pic">
						<img src="../../../assets/image/push-left.png" alt="">
					</div>
					<div class="bottom-concent">
						<div class="bottom-collect">
							<img src="../../../assets/image/collect.png" alt="">
							<p>收藏</p>
						</div>
						<div class="bottom-collect">
							<img src="../../../assets/image/answer.png" alt="">
							<p>看答案</p>
						</div>
						<div class="bottom-collect">
							<img src="../../../assets/image/card.png" alt="">
							<p>答题卡</p>
						</div>
					</div>
					<div class="bottom-right bottom-pic">
						<img src="../../../assets/image/push-right.png" alt="">
					</div>
				</div>
			</div>
		</div>
  </div>

</template>
<script>


export default {
    data(){
        return{
			choose:['A','B','C','D','E','F','G','H','I','J','K','L'],
			active: 'tab-container1',
			type:0,   //0章节  1题型
			subject:'',
			chapterID:'',  //章ID
			unitID:'',  //小节ID
			qtype:0,   //题型 1：A1 2：A2 3：A3/A4 4：B1 5：B2
			questionarr:[],  //当前20道题
			answerarr:[],  //选择答案题
			dataevery:{},  //每道题详情
			page:0,
			sort:1,   //当前第几题
        }
    },
    methods:{
        // 获取题目
        getCurrentQuestionNew(){
			var that = this;
			// 章节
			if(that.type==0||that.type=='0'){
				var url = this.$store.state.url+'Chapter/getCurrentQuestionNew';
				if(that.unitID==''){
					var data ={
						subject:that.subject,
						chapterID:that.chapterID,
						page:that.page
					}
				}else{
					var data ={
						subject:that.subject,
						unitID:that.unitID,
						chapterID:that.chapterID,
						page:that.page
					}
				}
			}else{
				var url = this.$store.state.url+'Chapter/getCurrentQuestionTxNew';
				var data ={
					subject:that.subject
				}
			}
			that.request.wxRequest('GET',url,data,function(res){
				if (res.data.errcode == 0 || res.data.errcode == '0') {
					// console.log(res.data.data);
					var data = res.data.data;
					var item = data[0];
					that.questionarr = data;
					that.dataevery = item;
				}
			})
        }, 
    },
	mounted(){
		var that = this;
		that.type=that.$route.query.type;
		that.subject=that.$route.query.subject;
		if(that.$route.query.chapterID){
		  that.chapterID=that.$route.query.chapterID;
		}
		
		if(that.$route.query.unitID){
		  that.unitID=that.$route.query.unitID;
		}
		
		if(that.$route.query.qtype){
		  that.qtype=that.$route.query.qtype;
		}
		// 获取题目数据
		that.getCurrentQuestionNew();
	}
}
</script>
<style scoped>
.questiontype{
	width: 6.9rem;
	margin: auto;
}
/* 头部 */
.questiontypetop{
	margin-top: .3rem;
	display: flex;
	justify-content: space-between;
	line-height: .3rem;
	font-size: .3rem;
}
.typeleft{
	color: #FE2326;
}
.typeright{
	color: #333333;
}
.page-tab-container{
	margin-top: .4rem;
}
.list .title{
	color: #333333;
	font-size: .3rem;
	margin-top: .2rem;
}
.main-list{
	margin-top: .1rem;
}
.main-list li{
	display: flex;
	justify-content: flex-start;
	margin-top: .3rem;
}
.main-list li .zimu{
	width: .5rem;
	border: 1px solid #CCCCCC;
	line-height: .5rem;
	color: #333333;
	font-size: .3rem;
	text-align: center;
	display: inline-block;
	border-radius: 50%;
}
.main-list li .zimu.chooseactive{
	border:none;
	background: #0287FF;
	color: #fff;
}
.main-list li p{
	margin-left: .2rem;
	color:#333333;
	font-size:.3rem;
	margin-top: .05rem;
}
.main-list li img{
	width: .5rem;
	height: .5rem;
}
.liststem{
	width: 7.5rem;
	background: #FFF4F4;
	padding: .3rem;
	font-size: .3rem;
	color: #333333;
	margin-top: .22rem;
}
.liststem1{
	width: 7.5rem;
	background: #FFF4F4;
	padding: .3rem;
}
.choose{
	margin-top: .3rem;
}
.chooseevery{
	float: left;
	width: .5rem;
	border: 1px solid #CCCCCC;
	line-height: .5rem;
	color: #333333;
	font-size: .3rem;
	text-align: center;
	border-radius: 50%;
	margin-right: .7rem;
}
/* 底部 */
.typebottom{
	position: fixed;
	width: 7.5rem;
	height: .98rem;
	bottom: 0;
	box-shadow:0rem -0.03rem 0.05rem 0rem rgba(71,68,80,0.06);
	background: rgba(255,255,255,.95);
}
.questiontypebottom{
	width: 6.9rem;
	margin: auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.bottom-concent{
	width: 60%;
	margin: auto;
	display: flex;
	justify-content: space-between;
}
.bottom-pic{
	width: 0.23rem;
	height: .4rem;
}
.bottom-pic img{
	width: 100%;
	height: 100%;
}
.bottom-collect{
	width: .8rem;
}
.bottom-collect img{
	width: .35rem;
	height: .35rem;
	margin:.16rem auto 0;
	display: block;
}
.bottom-collect p{
	margin-top: 0.09rem;
	color: #999999;
	font-size: .24rem;
	text-align: center;
}

</style>
